<template>
  <div>
    <Return txt="修改群聊名称"></Return>

    <div class="msg">
      <img src="../../assets/images/logo.png" alt="" />
      <input class="msgInput" type="text" placeholder="群名称" />
      <van-icon name="close" />
    </div>
        <p class="qunName">修改群聊名称后，将在群内通知其他成员。</p>
    <van-button color="#4AC7D7" class="button">确认</van-button>
  </div>
</template>
<script>
import Return from "../../components/return";
export default {
  components: {
    Return,
  },
  data() {
    return {};
  },
};
</script>
<style scoped>
.qunName {
  text-align: center;
  margin-top: 20px;
}
.msg {
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 10px 0;
  border-bottom: 0.1px solid #4AC7D7;
}
.msg img {
  width: 40px;
  height: 40px;
}
.msgInput {
  height: 40px;
  width: 80%;
  margin-left: 10px;
  border: none;
}
.button {
  width: 60%;
  margin-left: 20%;
  margin-top: 50px;
}
</style>